<template>
  <div class="userManager ibox">
      <div class="ibox-title">
          <h5>用户管理</h5>
          <div class="ibox-tools">
              <a class="dh"><i class="fa fa-chevron-up" @click="toggle"></i></a>
              
              <a><i class="fa fa-times"></i></a>
          </div>
      </div>
      <div class="ibox-centent" v-show="isShow">
          <div class="row">
              <div class="search">
                      <el-input 
                      placeholder="请输入员工编号或姓名查询" 
                      v-model="input5" 
                      @blur="resquestData"
                      @keyup.enter.native="getUser" class="wi">
                        <el-button
                         slot="append" @click="getUser">查询</el-button>
                      </el-input>

              </div>
              <div class="search wi">
            
                  <el-button class='fa fa-user-plus' @click.stop='changeDialogVisible("新增用户")'>
                      新增
                  </el-button>
                  <div class="search-r"></div>  
              </div>

              <div class="tt">
                  <el-table :data="tableData">
  
                              <el-table-column label="序号" type='index' width="120">                                 

                            </el-table-column>
                            <el-table-column property="userid" label="用户名">
                                
                            </el-table-column>
                            <el-table-column property="username" label="姓名">
                              
                            </el-table-column>
                            <el-table-column property="rolesname" label="角色">
                              <template scope="scope">
                                  <span v-for="(role,i) in scope.row.roles">
                                      <el-tag type="success" v-if='role.name'>{{role.name}}</el-tag></br>
                                  </span>
                              </template>
                            </el-table-column>
                            <el-table-column property="" label="操作" width="400">
                                <template slot-scope="scope">
                                  <span class="opt-btn-sp">
                                      <a @click='changeDialogVisible("角色授权",scope.$index)'><i class="fa fa-key"></i>角色授权</a>
                      
                          <!--角色授权结束-->
                                  <!-- <a @click='changeDialogVisible("总部部门授权",scope.$index)'><i class="fa fa-database"></i>总部部门授权 </a> -->
                                  <a @click='changeDialogVisible("高管单位授权",scope.$index)'><i class="fa fa-database"></i>高管单位授权</a>
                                  <!-- <a @click='changeDialogVisible("业务单位授权",scope.$index)'><i class="fa fa-database"></i>业务单位授权 </a> -->
                                  <a @click='changeDialogVisible("部门授权",scope.$index)'><i class="fa fa-database"></i>部门授权</a>
                                  </span>   
                              <!--icon删除图标-->
                                  <span class="delete" @click.stop='deleteData(scope.row)'><a> 删除 </a></span>
                                </template>
                            </el-table-column>

                      </el-table> 
              </div>
              
          </div>
        
        

        <!-- 分页组件 {{page.pageNum * page.pageSize}}-->
        <div class="pagination-block">
          <span class="info">共 {{page.total}}条记录，当前显示第 {{(page.pageNum-1)==0?1:(page.pageNum-1)*page.pageSize+1}} 到第 {{(page.pageNum * page.pageSize) - page.total>=1?(page.pageNum * page.pageSize) - (page.pageNum * page.pageSize - page.total):page.pageNum * page.pageSize}} 条记录</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 50, 200]"
            :page-size="page.pageSize"
            layout="sizes, prev, pager, next, jumper,slot"
            :total='page.total'
            >
          </el-pagination>
       </div>
        
      </div>
      <div class="dialog">
          <cxo-dialog></cxo-dialog>
          <business-dialog><</business-dialog>
          <department-dialog></department-dialog>
          <headquarters-dialog></headquarters-dialog>
          <role-dialog></role-dialog> 
          <adduser-dialog></adduser-dialog> 
        </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  ButtonGroup,
  Switch,
  Select,
  Input,
  Col,
  Row,
  Radio,
  RadioGroup,
  RadioButton,
  Table,
  TableColumn,
  Tag,
  Pagination,
} from "element-ui";

Vue.use(ButtonGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Input);
Vue.use(Col);
Vue.use(Row);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Pagination);

import cardLeader from "@/components/card-leader";
import searchBox from "@/components/search-box";
import adminUrl from "@/common/js/adminUrl";
import CxoDialog from "@/components/userManager/dialog/CxoDialog";
import BusinessDialog from "@/components/userManager/dialog/BusinessDialog";
import DepartmentDialog from "@/components/userManager/dialog/DepartmentDialog";
import HeadquartersDialog from "@/components/userManager/dialog/HeadquartersDialog";
import RoleDialog from "@/components/userManager/dialog/RoleDialog";
import AdduserDialog from "@/components/userManager/dialog/addUserDialog";

export default {
  components: {
    CxoDialog,
    BusinessDialog,
    DepartmentDialog,
    HeadquartersDialog,
    RoleDialog,
    AdduserDialog
  },
  data () {
    return {
      editFormVisible: false,
      dialogTableVisible: false,
      input5: "",
      isShow: true,
      tableData: null,
      currentRow: null,
      saveMessage: "",
      dialogVisible: {
        cxo: false,
        department: false,
        headquarters: false,
        role: false,
        business: false,
        adduser: false
      },
      page: {},
      pageSizeVal: '',
      searchFlag: false
    };
  },
  mounted () {
    this.resquestData();
    Bus.$on("roleSave", data => {
      if (data && data == "保存成功") {
        this.resquestData();
      }
    });


  },
  methods: {
    indexMethod (index) {
      console.log(index)
      return index * 10
    },
    deleteData (index) {

      this.Axios.Post(`${adminUrl.deleteUser.url}?userId=${index.userid}`)
        .then((res) => {
          if (res.status == 200) {
            alert('刪除成功')
            this.resquestData();

          } else {
            alert('刪除失败,请重试')

          }
        })
    },
    handleSizeChange (val) {

      this.pageSizeVal = val;

      let params = {
        pageNum: 1,
        pageSize: val,
        employeeIdOrName: this.input5 || ''
      }

      this.Axios.Post(adminUrl.queryUser.url, params).then((res) => {
        this.tableData = res.data.datas
        this.page = res.data.page
      })
    },
    handleCurrentChange (val) {

      let params = {
        pageNum: val,
        pageSize: this.pageSizeVal || 10,
        employeeIdOrName: this.input5 || ''
      }

      this.Axios.Post(adminUrl.queryUser.url, params).then((res) => {
        this.tableData = res.data.datas;
        this.page = res.data.page

      })

    },

    resquestData () {
      let params = {
        pageNum: 1,
        pageSize: 10,
        employeeIdOrName: this.input5 || ''
      }

     

      this.Axios.Post(adminUrl.queryUser.url, params).then((res) => {
        this.tableData = res.data.datas;
        this.page = res.data.page
      })

    },
    changeDialogVisible (text, i) {
      const dialogVisible = this.dialogVisible;
      switch (text) {
        case "角色授权":
          dialogVisible.role = true;
          break;
        case "高管单位授权":
          dialogVisible.cxo = true;
          break;
        case "业务单位授权":
          dialogVisible.business = true;
          break;
        case "部门授权":
          dialogVisible.department = true;
          break;
        case "新增用户":
          dialogVisible.adduser = true;
          break;
        default:
          break;
      }
      Bus.$emit(text, dialogVisible)

      if (text !== '新增用户') {
        Bus.$emit("userId", this.tableData[i].userid)
      }

    },
    toggle: function () {
      this.isShow = !this.isShow;
    },
    salaryDetail: function () {
      this.dialogTableVisible = true;
    },
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
    },

    //查询用户信息
    getUser () {

      let params = {
        pageNum: 1,
        pageSize: 10,
        employeeIdOrName: this.input5
      }

      this.Axios.Post(adminUrl.queryUser.url, params).then((res) => {
        this.tableData = res.data.datas;
        this.page = res.data.page
      })

      this.searchFlag = this.input5 ? this.input5 : false

    },

    beforeDestroy: function () {
      window.getFlowProcessFrom = null;
      window.getFlowProcessApplyFrom = null;
      window.getFlowProcessApprovedFrom = null;
    }
  }
};
</script>

<style lang='less'>
.userManager {
  clear: both;
  margin-bottom: 25px;
  margin-top: 0;
  padding: 0;
  .opt-btn-sp {
    a {
      cursor: pointer;
    }
  }
  .el-table .cell {
    padding-left: 40px !important;
  }
  .groupManage .first-title h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.1;
  }
  .groupManage .second-sec {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-top-color: #00a65a;
  }
  .content-right {
    float: right;
    margin-top: 17px;
  }

  .groupManage .select-dept {
    font-size: 14px;
  }
  .groupManage .display-title {
    border-bottom: 1px solid #f4f4f4;
    padding: 10px;
  }
  .groupManage .switch-btn {
    padding: 10px 10px;
  }
  .groupManage .collapse-card {
    padding: 10px 10px;
    border-bottom: 1px solid #f4f4f4;
  }

  .groupManage .third-card {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #3c8dbc;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }
  .groupManage .third-card .collapse-card .box-title {
    display: inline-block;
    font-size: 18px;
    color: #444;
    font-weight: 500;
    margin: 0;
    line-height: 1;
  }
  .groupManage .third-card .collapse-card .box-title .box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
  }
  .groupManage .third-card .collapse-card .collapse {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
  }
  /*content*/

  .ibox-title {
    background-color: #ffffff;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 2px 0 0;
    color: inherit;
    margin-bottom: 0;
    color: #6c6a6c;
    padding: 15px 15px 7px;
    min-height: 48px;
  }
  .ibox-title h5 {
    display: inline-block;
    font-size: 14px;
    margin: 0 0 7px;
    padding: 0;
    text-overflow: ellipsis;
    float: left;
  }

  .ibox-tools {
    display: block;
    float: none;
    margin-top: 0;
    position: relative;
    padding: 0;
    text-align: right;
  }
  .ibox-tools a {
    cursor: pointer;
    margin-left: 5px;
    color: #c4c4c4;
  }
  /*ibox-centent*/
  .ibox-centent {
    padding: 20px 0 10px 0;
    clear: both;
    background-color: #ffffff;
    color: inherit;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
  }

  .row .search {
    width: 100%;
    margin-bottom: 15px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .row .search .wi {
    width: 33.3333333%;
  }

  .search-l {
    width: 33.3333333%;
    margin-bottom: 5px;
  }
  .el-button .r {
    width: 66.66666667%;
  }
  .el-input-group__append .el-button {
    background: #1ab394;
    color: #fff;
    border: 1px solid #1ab394;
  }

  .btn-sp {
    padding-left: -10px;
  }
  .btn-sp > a {
    border: 1px solid #23c6c8;
    background: #23c6c8;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin-top: 5px;
  }
  .opt-btn-sp > a {
    border: 1px solid #18a689;
    background: #18a689;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin: 10px 0;
  }
  .delete > a {
    border: 1px solid #ec4758;
    background: #ec4758;
    color: #fff;
    border-radius: 3px;
    padding: 2px 9px;
    font-size: 12px;
    display: inline-block;
    margin: 10px 0;
  }
  .el-pagination {
    margin-top: 20px;
  }
  /*角色授权*/
  .modal-content {
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
    position: relative;
  }
  .modal-header .close {
    margin-top: -2px;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: black;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
  }
  .modal-title {
    margin: 0;
    line-height: 1.42857143;
  }
  .modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 600;
    font-size: 14px;
  }
  .modal-body {
    padding: 20px 30px 30px 30px;
    position: relative;
  }
  .el-dialog__body {
    color: #48576a;
  }
  .list-unstyled {
    padding-left: 0;
    list-style: none;
  }
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 4px 0 0;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
  }
  .modal-footer {
    margin-top: 0;
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
  }
  .btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #ffffff;
    padding: 8px 13px;
    border-radius: 3px;
    border: 1px solid #1ab394;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }
  .modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
    color: inherit;
    background: white;
    border: 1px solid #e7eaec;
    padding: 8px 13px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
  }

  .glyphicon {
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: "Glyphicons Halflings";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /*图标*/
  .glyphicon-off:before {
    content: "\e017";
  }
  /*修改element-ui样式*/

  .groupManage .el-radio-button__inner:hover {
    color: #333;
  }
  .groupManage .el-radio-group .el-radio-button__inner:hover {
    background-color: #e7e7e7;
  }
  .groupManage .el-radio-group .el-radio-button__inner {
    background-color: #f4f4f4;
  }

  .groupManage .el-radio-group .is-active .el-radio-button__inner:hover {
    background-color: #d4d4d4 !important;
  }
  /*i*/
  .el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
    margin: 0;
    vertical-align: middle;
    width: 14px;
    text-align: center;
  }
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-width: 1px 0px 1px 1px;
  }
  .el-input-group__append .el-button[data-v-4fefba28] {
    border: 1px solid #1ab394;
    border-radius: 0px 3px 3px 0px;
    line-height: 0.99;
  }

  .ibox-tools dh {
    background: red;
    display: inline-block;
  }
  .el-tag--success {
    margin-top: 3px;
  }

  .pagination-block {
    margin-top: 22px;
    display: flex;
    align-items: center;
  }
  .pagination-block .el-pagination {
    margin-top: 0;
  }
  .pagination-block .info {
    margin: 0 50px 0 20px;
  }
  .pagination-block .el-pagination__sizes {
    margin-top: -2px;
  }
}

.ibox {
  .ibox-centent {
    .el-button {
      background: #1ab394;
      border: 1px solid #1ab394;
      color: #fff;
    }
  }
}
</style>
